﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>The Greatest Commandments Project</title>

</head>

<body>
    <script src="scripts/d3.min.js"></script>
    <script src="scripts/jquery-1.9.0.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <script src="Scripts/knockout-3.1.0.js"></script>
    <script src="mitzvotmash.js"></script>
    <link type="text/css" rel="stylesheet" href="content/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="app.css" />

    <div id="mitzvotPopoverTemplate" style="display: none;">
        <blockquote>
            <p>{{text}}</p>
            <footer>{{book}} {{chapter}}:{{verse}}</footer>
        </blockquote>
    </div>

    <div id="headerContainer" class="container" style="text-align: center; padding-left: 50px;">
        <div class="jumbotron">
            <h1>Welcome to <abbr title="Etz Mitzvot עץ מצוות is the Hebrew term for commandments tree">EtzMitzvot</abbr></h1>
            <div style="max-width: 630px; margin: 0 auto; text-align: left;">
                <p><strong>What is this?</strong> An interactive visual map of every commandment in the <abbr title="The Torah, the Law of Moses, is the first 5 books of the Hebrew Bible">Torah</abbr>. It’s a fun way to explore the Biblical commandments from a thousand-foot view.</p>
                <p>
                    <button class="btn btn-primary btn-lg" data-bind="click: scrollToTreeTop">Take me to the tree</button>
                    <a href="http://judahgabriel.blogspot.com/2014/04/introducing-etzmiztvotcom-rebooting.html" target="_blank" class="btn btn-default btn-lg" role="button">Learn more</a>
                </p>
                <br />
                <h3>How to</h3>
                <p>
                    <strong>Hover</strong> over a commandment to see more details.
                    <br />
                    <strong>Click</strong> a commandment to show/hide its children.
                </p>
                <br />
                <h3>Statistics</h3>
                <p>This is a work in progress. Each week we add new commandments to the tree, derived from <abbr title="Maimonides (Moshen Ben Maimon) was a preeminent rabbi of the 12th century, one of the most influential rabbis in the history of Judaism.">Maimonides'</abbr> famous list of <a href="http://en.wikipedia.org/wiki/613_mitzvot">613 commandments</a>. We blog about each addition over at the <a href="http://judahgabriel.blogspot.com/search/label/commandments%20hierarchy">Kineti blog</a>.</p>
                <div class="progress">
                    <div class="progress-bar progress-bar-success" data-bind="style: { width: commandmentsDonePercent }, attr: { title: $data.commandmentsDoneCount() + ' of 613 commandments have been mapped; the project is ' + $data.commandmentsDonePercent() + ' complete.' }">
                        <span data-bind="text: commandmentsDoneCount"></span>
                        <span>commandments done</span>
                    </div>
                    <div class="progress-bar progress-bar-warning" data-bind="style: { width: commandmentsRemainingPercent }">
                        <span data-bind="text: commandmentsRemainingCount"></span>
                        <span>commandments remaining</span>
                    </div>
                </div>
                <br />
                <p></p>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        new app();
    </script>
</body>
</html>